<template>
  <div>
    <form action="/">
  <van-search
  shape="round"
    v-model="value"
    show-action
    placeholder="请输入搜索关键词"
    @search="onSearch"
    @cancel="onCancel"
    @input="oninput"
    background="#0057b7"
  />
</form>
<p class="top">搜索发现</p>

<div class="main">
    <span>无畏Pro15</span>
    <span>无畏Pro15</span>
    <span>无畏Pro15</span>
    <span>无畏Pro15</span>
    <span>无畏Pro15</span>
    <span>无畏Pro15</span>
</div>
<p class="top1">搜索推荐</p>
<div class="faxian">
    <div class="box">
        <span><img src="https://static.asus.com.cn/store/album/images/LY5P2ZG7BG6F5R/16415551102499.jpg" alt=""></span>
        <div class="bottom">
            <span>华硕天选 </span>
            <span class="right">热</span>
        </div>
    </div>
    <div class="box">
        <span><img src="https://static.asus.com.cn/store/album/images/LY5P2ZG7BG6F5R/16415551102499.jpg" alt=""></span>
        <div class="bottom">
            <span>华硕天选 </span>
            <span class="right">热</span>
        </div>
    </div>
    <div class="box">
        <span><img src="https://static.asus.com.cn/store/album/images/LY5P2ZG7BG6F5R/16415551102499.jpg" alt=""></span>
        <div class="bottom">
            <span>华硕天选 </span>
            <span class="right">热</span>
        </div>
    </div>
    <div class="box">
        <span><img src="https://static.asus.com.cn/store/album/images/LY5P2ZG7BG6F5R/16415551102499.jpg" alt=""></span>
        <div class="bottom">
            <span>华硕天选 </span>
            <span class="right">热</span>
        </div>
    </div>
    <div class="box">
        <span><img src="https://static.asus.com.cn/store/album/images/LY5P2ZG7BG6F5R/16415551102499.jpg" alt=""></span>
        <div class="bottom">
            <span>华硕天选 </span>
            <span class="right">热</span>
        </div>
    </div>
    <div class="box">
        <span><img src="https://static.asus.com.cn/store/album/images/LY5P2ZG7BG6F5R/16415551102499.jpg" alt=""></span>
        <div class="bottom">
            <span>华硕天选 </span>
            <span class="right">热</span>
        </div>
    </div>
    <div class="box">
        <span><img src="https://static.asus.com.cn/store/album/images/LY5P2ZG7BG6F5R/16415551102499.jpg" alt=""></span>
        <div class="bottom">
            <span>华硕天选 </span>
            <span class="right">热</span>
        </div>
    </div>
    <div class="box">
        <span><img src="https://static.asus.com.cn/store/album/images/LY5P2ZG7BG6F5R/16415551102499.jpg" alt=""></span>
        <div class="bottom">
            <span>华硕天选 </span>
            <span class="right">热</span>
        </div>
    </div>
    <div class="box">
        <span><img src="https://static.asus.com.cn/store/album/images/LY5P2ZG7BG6F5R/16415551102499.jpg" alt=""></span>
        <div class="bottom">
            <span>华硕天选 </span>
            <span class="right">热</span>
        </div>
    </div>
</div>
<van-tabbar v-model="active" active-color="blue" inactive-color="#000" :placeholder=true>
    <van-tabbar-item  :to="'/homepage'" icon="wap-home-o">首页</van-tabbar-item>
        <van-tabbar-item  :to="'/classify'" icon="apps-o">分类</van-tabbar-item>
        <van-tabbar-item icon="browsing-history-o">发现</van-tabbar-item>
        <van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item>
        <van-tabbar-item :to="'/my'" icon="user-o">我的</van-tabbar-item>
</van-tabbar>
  </div>
</template>

<script>
import Vue from 'vue';
import { Search } from 'vant';

Vue.use(Search);
import { Tabbar, TabbarItem } from 'vant';

Vue.use(Tabbar);
Vue.use(TabbarItem);
export default {
    data(){
        return{
            active:0,
            value:'',
            text:[]
        }
    },
    methods:{
        onSearch(){
            console.log(1);
        },
        onCancel(){
            // console.log(1);
            this.$router.push('/homepage').catch(err=>{})
        },
        oninput(){
            if(this.value!=''){
           
            }
          
            
        }
    }
}
</script>

<style scoped>
.van-search__action{
    color: white;
}
.top ,.top1{
    font-size: 22px;
    font-weight: bold;
    margin: 30px 0px 10px 20px;

}
.main{
    /* background-color: red; */
    height: 100px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.main span{
    margin-left: 20px;
    background-color: gray;
    display: block;
    height: 30px;
    text-align: center;
    line-height: 30px;
    width: 80px;
    border-radius: 30px;
    font-size: 12px;
}
.box{
    display: flex;
}
.faxian img{
    width: 67px;
    height: 67px;
}
.faxian .bottom{
 padding: 20px 10px 0px 10px;
 width: 100%;
 display: flex;
 justify-content: space-between;
}
.box span{
    display: block;
}
.right{
    margin-left: 100px;
    background-color: red;
    text-align: center;
    display: block;
    height: 20px;
    width: 30px;
    line-height: 20px;
    border-radius: 5px;
    font-size: 12px;
    color: white;
}

</style>